<template>
  <a-col :span="workSpaceItem.width || 24">
    <div class="protal-compt-wrapper" ref="funcArea">
      <a-card :bordered="false">
        <div slot="title" class="title">
          <!-- <span>{{workSpaceItem.title}}</span> -->
          <span>{{ $t('portal.funcArea') }}</span>
          <a-icon type="form" class="edit-btn" @click="openConfig" />
        </div>
        <div class="card-content-area">
          <a-tabs v-model="activeTab">
            <a-tab-pane v-for="(item) in funcList" :key="item.id" :tab="item.name">
              <!-- <lists :data="item.children?item.children:[]"></lists> -->
              <ul class="func-list-box">
                <li class="func-list-li" v-for="(funcItem) in item.children?item.children:[]" :key="funcItem.id">
                  <func-item :data="funcItem"></func-item>
                </li>
              </ul>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
      <config-modal
       :visible="cfgModalStatus"
       :resFuncData="resFuncData"
       :workSpaceItem="workSpaceItem"
       @ok="submitOK"
       @cancel="cancelModal"
       :getContainer="getContainer">
      </config-modal>
    </div>
  </a-col>
</template>
<script>
// import Lists from './Lists'
import ConfigModal from './ConfigModal'
import clonedeep from 'lodash.clonedeep'
import { getComponentDataList, requestIcon } from '@/api/devportalApi.js'
import { listToTree } from '@/utils/util.js'
import FuncItem from './FuncItem'
export default {
  name: 'FuncArea',
  props: {
    dataUrl: {
      type: String,
      defualt: ''
    },
    workSpaceItem: {
      type: Object,
      defualt: () => ({})
    }
  },
  data () {
    return {
      activeTab: 0,
      cfgModalStatus: false,
      resFuncData: [],
      funcList: []
    }
  },
  components: {
    // Lists,
    FuncItem,
    ConfigModal
  },
  methods: {
    openConfig () {
      this.cfgModalStatus = true
    },
    submitOK () {
      this.$emit('refreshPersonalConfig')
      this.cfgModalStatus = false
    },
    cancelModal () {
      this.cfgModalStatus = false
    },
    getContainer () {
      return this.$refs.funcArea
    },
    filterData (prevList, nextList) {
      return prevList.filter(item => {
        return nextList.some(cfgItem => cfgItem.contentId == item.id)
      })
    },
    getLevelAndShow () {
      getComponentDataList(this.dataUrl).then(res => {
        let data = res.data.content ? res.data.content : []
        this.resFuncData = clonedeep(data)
        let filterData
        if (this.workSpaceItem.personalConfig) {
          let contentSortList = this.workSpaceItem.personalConfig.contentSortList
          filterData = this.filterData(data, contentSortList)
          filterData.forEach(item => {
            item.rank = contentSortList.find(obj => obj.contentId == item.id).rank
          })
        } else {
          filterData = data
        }
        let promiseArr = []
        let idData = []
        filterData.forEach((item, index) => {
          if(item.hierarchy === 1) {
            let promise = new Promise(resolve => {
              requestIcon(`id=${item.id}`).then(res1 => {
                resolve(res1)
              })
            })
            idData.push(index)
            promiseArr.push(promise)
          }
        })
        Promise.all(promiseArr).then(resArr => {
          resArr.forEach((res2, idx) => {
            if (res2 && res2.status === 200) {
              let icon = 'data:image/png;base64,' + btoa(
                new Uint8Array(res2.data)
                  .reduce((data1, byte) => data1 + String.fromCharCode(byte), '')
              )
              filterData[idData[idx]].newIcon = icon
            }
          })
          this.funcList = listToTree(filterData)
          this.activeTab = this.funcList[0] ? this.funcList[0].id : ''
        })
        // this.funcList = listToTree(filterData)
        // this.activeTab = this.funcList[0] ? this.funcList[0].id : ''
      })
    }
  },
  mounted () {
    if (this.dataUrl) {
      console.log('FuncArea mounted');
      this.getLevelAndShow()
    }
  },
  watch: {
    workSpaceItem () {
      let filterData
      if (this.workSpaceItem.personalConfig) {
        let contentSortList = this.workSpaceItem.personalConfig.contentSortList
        filterData = this.filterData(this.resFuncData, contentSortList)
        filterData.forEach(item => {
          item.rank = contentSortList.find(obj => obj.contentId == item.id).rank
        })
      } else {
        filterData = clonedeep(this.resFuncData)
      }
      this.funcList = listToTree(filterData)
      this.activeTab = this.funcList[0] ? this.funcList[0].id : ''
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/pages/devportal/modules/index.less';
.func-list-box {
  white-space: nowrap;
  .func-list-li {
    display: inline-block;
    padding: 25px 35px;
  }
}
</style>